<script setup lang="ts">
import { h, onMounted, ref } from 'vue'
// import Button from './components/Button/Button.vue'
// import type { ButtonInstance } from './components/Button/type'
// const buttonRef = ref<ButtonInstance | null>(null)
// onMounted(() => {
//   if (buttonRef.value) {
//     console.log(buttonRef.value.ref)
//   }
// })

// import Collapse from './components/Collapse/Collapse.vue'
// import Item from './components/Collapse/CollapseItem.vue'
// const openModel = ref(['one', 'two'])
// import Icon from './components/Icon/Icon.vue'

// import Alert from './components/Alert/Alert.vue'
// const handleClose=()=>{
// }

// import VNode from './components/VNode/Node'

// import { createPopper } from '@popperjs/core'
// const buttonRef = ref<HTMLElement>()
// const popoverRef = ref<HTMLElement>()
// onMounted(() => {
//   if (popoverRef.value && buttonRef.value) {
//     createPopper(buttonRef.value, popoverRef.value, { placement: 'bottom' })
//   }
// })

import Tooltip from './components/Tooltip/Tooltip.vue'
import Button from './components/Button/Button.vue'
// const trigger = ref<'click' | 'hover'>('click')
// setTimeout(() => {
//   trigger.value = 'hover'
// }, 2000)

// const trigger = ref<any>('click')
// const options = [
//   { key: 1, label: h('b', 'this is bold') },
//   { key: 2, label: 'item2', disabled: true },
//   { key: 3, label: 'item3', divided: true },
//   { key: 4, label: 'item4' }
// ]
// import Dropdown from './components/Dropdown/Dropdown.vue'
// import Dropdown from './components/Dropdown/Dropdown.tsx'
// const aaa = () => {
//   console.log(666)
// }

import Message from './components/Message/Message.vue'
import { createMessage } from './components/Message/method'
createMessage({ message: 'hello world', showClose: true,type:'danger'  })
createMessage({ message: 'hello world again', duration: 0, showClose: true,type:'success'  })
createMessage({ message: 'hello world three', duration: 0, showClose: true  })
</script>

<template>
  <!-- <a href="#">a48a498a4</a>
  <Button type="primary" size="large">战神</Button>
  <Button type="danger" size="large">战神</Button>
  <Button type="success" disabled size="large">战神</Button>

  <Button type="success" loading size="large">战神</Button>
  <Button type="success" icon="arrow-up"
  plain
  size="large">战神2</Button>   -->

  <!-- <Collapse v-model="openModel" accordion>
    <Item name="one" title="第一个标题">
      <h1>第一个内容</h1>
    </Item>
    <Item name="two">
      <template #title>
        <h2>第二个标题</h2>
      </template>
      <h1>第二个内容</h1>
    </Item>
    <Item name="three" title="第三个标题" disabled>
      <h1>第三个内容</h1>
    </Item>
  </Collapse>  -->

  <!-- <Icon
    icon="fa-solid fa-user-secret"
    size="2xl"
    type="primary"
    spin
     /> -->

  <!-- <Alert type="danger" effect="dark" closable @close="handleClose"
    ><h3>9999</h3>
  </Alert> -->

  <!-- <VNode msg='666' /> -->

  <!-- <button ref="buttonRef">兔妹妹</button>
  <h1 ref="popoverRef">我爱你</h1> -->

  <!-- <Tooltip content="666" placement="bottom" trigger="hover">
    <template #content><span>一条消息</span></template>
    <Button style="display: inline-block;">男牛</Button>
  </Tooltip> -->
  <!-- <Dropdown
    placement="bottom"
    :trigger="trigger"
    :menu-options="options"
    @visible-change="aaa">
    <h1>6666</h1>
  </Dropdown> -->

  <!-- <Message message="你的兔妹妹" /> -->
  <!-- <Message message="你的兔" :duration=0 show-close /> -->
</template>

<style></style>
